<template>
    <div class='funeral_item_select' :style="styles2">
        <div style="margin-top: 5px;">
            <el-input placeholder="请输入内容" @keyup.enter.native="goSearch" v-model="names" class="input-with-select" style='width:95%'>
            <el-select v-model="pId" slot="prepend" placeholder="请选择" style='width:120px;'>
                <el-option label="请选择..." value="" ></el-option>
                <el-option :label="item.sf_ex2" :value="item.sf_id" v-for="(item,index) in options" :key="index"></el-option>
            </el-select>
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
       <el-table
            :data="tableData"
            stripe
            style="width: 100%;"
            @row-dblclick="funeralItemSelect"
            >
            <el-table-column
            prop="sf_ex1"
            label="项目编号"
            width="90">
             <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                <p>编号: {{ scope.row.sf_ex1 }}</p>
                <p>名称: {{ scope.row.szi_ex1 }}</p>
                <p>单价: {{ scope.row.szi_ex2 }}</p>
                <p>备注: {{ scope.row.szi_ex6 }}</p>
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.sf_ex1 }}</el-tag>
                </div>
                </el-popover>
            </template>
            </el-table-column>
            <el-table-column
            prop="szi_ex1"
            label="项目名称"
            width="140">
            
            
            </el-table-column>
            <el-table-column
            prop="szi_ex2"
            label="单价"
            width="90">
            </el-table-column>
           
            <el-table-column
            prop="szi_ex3"
            label="单位" width="60">
            </el-table-column>
            
        </el-table>
    </div>
</template>
<script>
export default {
    name:'gm_funeral_item_select',
    props:['type','styles'],
    components: {
    },
    data(){
        return{
            tableData:[],
            styles2:this.styles,
            options:[],
            pId:'',
            names:''
        }
    },
    created(){
       
        let sef=this;
        this.$post("cemetery/buy/getSfItem",{type:this.type}).then(data=>{
            sef.tableData=[];
            for(let i=1;i<data.item.length;i++){
                sef.tableData.push(data.item[i])
            }
            this.options=data.options;
            
        })
        if(!this.styles){
            this.styles2="height:50VH;";
        }
        console.log("styles2===="+this.styles2+"=="+this.styles)
    },
    watch:{
        pId: function (val) {
            let sef=this;
            this.$post("cemetery/buy/getSfItem",{type:this.type,pId:val}).then(data=>{
                sef.pId=val;
                sef.tableData=[];
                for(let i=1;i<data.item.length;i++){
                    sef.tableData.push(data.item[i])
                }
                
            })
        }
    },
    methods:{
        funeralItemSelect(row, column, event){
           // console.log(row);
            this.$emit('funeralItemSelectEvent',JSON.stringify(row));
        },
        addItemByName(name){
            let row=null;
            for(let i=0;i<this.tableData.length;i++){
                let szi_ex1=this.tableData[i].szi_ex1;
                if(szi_ex1==name)
                    row=this.tableData[i];
            }
            if(row!=null)
                this.$emit('funeralItemSelectEvent',JSON.stringify(row));
        },
        goSearch(){
            let sef=this;
            this.$post("cemetery/buy/getSfItem",{type:this.type,pId:this.push,name:this.names}).then(data=>{
               
                sef.tableData=[];
                for(let i=1;i<data.item.length;i++){
                    sef.tableData.push(data.item[i])
                }
                
            })
        }
    }
}
</script>
<style scoped>
.funeral_item_select{
    width:100%;
    overflow:auto;
}
</style>